<template>
	<view class="space-wrap">
		<!-- 头部header -->
		<view class="header">
			<uni-nav-bar :statusBar="true" leftIcon="arrowleft" fixed="true" backgroundColor="#09BB07" color="#fff" :border="false" title="食堂概况" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<view class="space-content">
			<view class="content">
				<!-- 头像/用户信息部分 -->
				<view class="avatar-wrap">
					<view class="avatar-image">
						<image src="../../../static/img/common/icon_praise.jpg" mode="" class="image"></image>
					</view>
					<view class="user-info-wrap">
						<view class="user-name">李先生</view>
						<view>校长</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="list-wrap">
					<view class="uni-panel" v-for="item in lists" :key="item.url">
						<view class="uni-panel-h" @click="goDetailPage(item.url)">
							<text class="uni-panel-text">{{item.name}}</text>
							<text class="uni-panel-icon uni-icon">&#xe470;</text>
						</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [
					{
						name: "通用",
						url: "../../general/general"
					},
					{
						name: "设置",
						url: "calendar"
					},
					{
						name: "检查更新",
						url: "card"
					},
					{
						name: "问题反馈",
						url: "collapse"
					},
					{
						name: "关于我们",
						url: "../../about/about"
					}
				]
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			goDetailPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.space-wrap {
	.space-content {
		.content {
			.avatar-wrap {
				background-color: #09BB07;
				box-sizing: border-box;
				padding: 20rpx 36rpx;
				display: flex;
				align-items: center;
				.avatar-image {
					flex: 0 0 180rpx;
					width: 180rpx;
					height: 180rpx;
					.image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.user-info-wrap {
					color: #fff;
					flex: 1;
					padding: 0rpx 20rpx;
					.user-name {
						font-size: 34rpx;
						font-weight: bold;
					}
				}
			}
			.list-wrap {
				box-sizing: border-box;
				margin-top: 20rpx;
				padding: 10rpx 36rpx;
				.uni-panel {
					box-shadow: 0px 0px 0px 2rpx #F8F8F8;
				    margin-bottom: 12px;
				}
				
				.uni-panel-h {
				    display: flex;
				    flex-direction: row;
				    align-items: center;
				    padding: 12px;
				}
				/*
				.uni-panel-h:active {
				    background-color: #f8f8f8;
				}
				 */
				.uni-panel-h-on {
				    background-color: #f0f0f0;
				}
				
				.uni-panel-text {
				    flex: 1;
				    color: #000000;
				    font-size: 14px;
				    font-weight: normal;
				}
				
				.uni-panel-icon {
				    margin-left: 15px;
				    color: #999999;
				    font-size: 14px;
				    font-weight: normal;
				    transform: rotate(0deg);
				    transition-duration: 0s;
				    transition-property: transform;
				}
				
				.uni-panel-icon-on {
				    transform: rotate(180deg);
				}
			}
		}
	}
}
</style>
